<template>
  <el-container direction="vertical">
    <el-backtop :bottom="60"></el-backtop>
    <navMenu width="100%"></navMenu>

    <el-container direction="horizontal">
      <el-aside width="280px" height="100%">
        <sideBar class="menu" page-index="2-3" open-index="2" style="height: 100%"></sideBar>
      </el-aside>
      <el-main>
        <!--        <p>this is subcom page</p>-->
        <!--搜索栏-->
        <el-container direction="horizontal">
          <el-input v-model="words.word" placeholder="请输入里程标名字 （支持模糊查询）"></el-input>
          <el-button style="margin-left: 20px" @click="vague()">搜索</el-button>
          <el-button type="primary" style="margin-left: 16px;" @click="dialogVisible = true">添加</el-button>
        </el-container>

        <el-dialog
          title="新建里程标"
          :visible.sync="dialogVisible"
          width="60%">

          <el-row>
            <el-col offset="3" :span="21">
              <el-form :label-position="left" label-width="120px" :inline="true" :model="formInline" class="demo-form-inline" size="small">
                <el-form-item label="里程标编号">
                  <el-input v-model="newmilemarkinfo.milemark_id" placeholder="如：001"></el-input>
                </el-form-item>
                <el-form-item label="里程标名称">
                  <el-input v-model="newmilemarkinfo.milemark_name" placeholder="里程标名称"></el-input>
                </el-form-item>
                <el-form-item label="所属线路">
                  <el-select v-model="val" clearable placeholder="请选择所属线路">
                    <el-option
                      v-for="item in options"
                      :key="item.line_name"
                      :label="item.line_name"
                      :value="item.line_index">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="起始站点">
                  <el-select v-model="newmilemarkinfo.start_point_id" clearable placeholder="请选择">
                    <el-option
                      v-for="item in option_station1"
                      :key="item.station_id"
                      :label="item.station_name"
                      :value="item.station_id">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="终止站点">
                  <el-select v-model="newmilemarkinfo.end_point_id" clearable placeholder="请选择">
                    <el-option
                      v-for="item in option_station2"
                      :key="item.station_id"
                      :label="item.station_name"
                      :value="item.station_id">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-form>
            </el-col>
          </el-row>


          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false" size="small">取 消</el-button>
            <el-button type="primary" @click="newmilemark()" size="small">确 定</el-button>
          </span>
        </el-dialog>

        <!--线路列表-->
        <div v-for="(mark,index) in mileMarkData" style="margin-top: 15px">

          <el-row v-if="index%2===0&&index<mileMarkData.length" type="flex" class="row-bg">
            <el-col :span="12">
              <el-card class="box-card">
                <div slot="header" class="clearfix" style="height: 10px">
                  <span>No.{{mark.milemark_id}}</span>
                  <span>所属线路：{{mark.line_name}}</span>
                  <el-button style="float: right; padding: 3px 0" type="text" @click="retain(mark)">编辑</el-button>
                  <el-button style="float: right; padding: 3px 0" type="text" @click="handleDelete(mark.milemark_id)">删除</el-button>

                  <el-dialog
                    title="修改里程标"
                    :visible.sync="dialogVisible2"
                    width="60%">

                    <el-row>
                      <el-col offset="3" :span="21">
                        <el-form :label-position="left" label-width="120px" :inline="true" :model="formInline" class="demo-form-inline" size="small">
                          <el-form-item label="里程标编号">
                            {{editmilemarkinfo.milemark_id}}
                          </el-form-item>
                          <el-form-item label="里程标名称">
                            <el-input v-model="editmilemarkinfo.milemark_name" placeholder="里程标名称"></el-input>
                          </el-form-item>
                          <el-form-item label="所属线路">
                            <el-select v-model="val_edit" clearable placeholder="请选择所属线路">
                              <el-option
                                v-for="item in options"
                                :key="item.line_name"
                                :label="item.line_name"
                                :value="item.line_index">
                              </el-option>
                            </el-select>
                          </el-form-item>
                          <el-form-item label="起始站点">
                            <el-select v-model="editmilemarkinfo.start_point_id" clearable placeholder="请选择">
                              <el-option
                                v-for="item in option_station1"
                                :key="item.station_id"
                                :label="item.station_name"
                                :value="item.station_id">
                              </el-option>
                            </el-select>
                          </el-form-item>
                          <el-form-item label="终止站点">
                            <el-select v-model="editmilemarkinfo.end_point_id" clearable placeholder="请选择">
                              <el-option
                                v-for="item in option_station2"
                                :key="item.station_id"
                                :label="item.station_name"
                                :value="item.station_id">
                              </el-option>
                            </el-select>
                          </el-form-item>
                        </el-form>
                      </el-col>
                    </el-row>


                    <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible2 = false" size="small">取 消</el-button>
            <el-button type="primary" @click="handleEdit()" size="small">确 定</el-button>
          </span>
                  </el-dialog>

                </div>
                <div>
                  <el-row>
                    <el-col :span="12">
                      {{mark.milemark_name}}
                    </el-col>
                    <el-col :span="12">
                      <el-steps :active="2"  finish-status="info">
                        <el-step icon="el-icon-location-outline"  v-bind:description="mark.start_name" style="color: #4169E1"></el-step>
                        <el-step icon="el-icon-location-outline" v-bind:description="mark.stop_name" style="color: #4169E1"></el-step>
                      </el-steps>
                    </el-col>
                  </el-row>

                </div>
              </el-card>
            </el-col>
            <el-col v-if="index+1<mileMarkData.length" :span="12">
              <el-card class="box-card">
                <div slot="header" class="clearfix" style="height: 10px">
                  <span>No.{{mileMarkData[index+1].milemark_id}}</span>
                  <span>所属线路：{{mileMarkData[index+1].line_name}}</span>
                  <el-button style="float: right; padding: 3px 0" type="text" @click="retain(mileMarkData[index+1])">编辑</el-button>
                  <el-button style="float: right; padding: 3px 0" type="text" @click="handleDelete(mileMarkData[index+1].milemark_id)">删除</el-button>

                  <el-dialog
                    title="修改里程标"
                    :visible.sync="dialogVisible2"
                    width="60%">

                    <el-row>
                      <el-col offset="3" :span="21">
                        <el-form :label-position="left" label-width="120px" :inline="true" :model="formInline" class="demo-form-inline" size="small">
                          <el-form-item label="里程标编号">
                            {{editmilemarkinfo.milemark_id}}
                          </el-form-item>
                          <el-form-item label="里程标名称">
                            <el-input v-model="editmilemarkinfo.milemark_name" placeholder="里程标名称"></el-input>
                          </el-form-item>
                          <el-form-item label="所属线路">
                            <el-select v-model="val_edit" clearable placeholder="请选择所属线路">
                              <el-option
                                v-for="item in options"
                                :key="item.line_name"
                                :label="item.line_name"
                                :value="item.line_index">
                              </el-option>
                            </el-select>
                          </el-form-item>
                          <el-form-item label="起始站点">
                            <el-select v-model="editmilemarkinfo.start_point_id" clearable placeholder="请选择">
                              <el-option
                                v-for="item in option_station1"
                                :key="item.station_id"
                                :label="item.station_name"
                                :value="item.station_id">
                              </el-option>
                            </el-select>
                          </el-form-item>
                          <el-form-item label="终止站点">
                            <el-select v-model="editmilemarkinfo.end_point_id" clearable placeholder="请选择">
                              <el-option
                                v-for="item in option_station2"
                                :key="item.station_id"
                                :label="item.station_name"
                                :value="item.station_id">
                              </el-option>
                            </el-select>
                          </el-form-item>
                        </el-form>
                      </el-col>
                    </el-row>


                    <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible2 = false" size="small">取 消</el-button>
            <el-button type="primary" @click="handleEdit()" size="small">确 定</el-button>
          </span>
                  </el-dialog>

                </div>
                <div>
                  <el-row>
                    <el-col :span="12">
                      {{mileMarkData[index+1].milemark_name}}
                    </el-col>
                    <el-col :span="12">
                      <el-steps :active="2" finish-status="info">
                        <el-step icon="el-icon-location-outline" v-bind:description="mileMarkData[index+1].start_name" style="color: #4169E1"></el-step>
                        <el-step icon="el-icon-location-outline" v-bind:description="mileMarkData[index+1].stop_name" style="color: #4169E1"></el-step>
                      </el-steps>
                    </el-col>
                  </el-row>

                </div>
              </el-card>
            </el-col>
          </el-row>



        </div>



      </el-main>
    </el-container>
  </el-container>

</template>

<script>
import sideBar from "@/components/sideBar";
import navMenu from "@/components/navMenu";
export default {
  components: {sideBar, navMenu},
  data() {

    return {
      // data:generateData(),
      data:[{label: '上海', key: 0, pinyin: '上海'},
        {label: '北京', key: 1, pinyin: 'beijing'},
        {label: '广州', key: 2, pinyin: 'guangzhou'},
        {label: '深圳', key: 3, pinyin: 'shenzhen'},
        {label: '南京', key: 4, pinyin: 'nanjing'},
        {label: '西安', key: 5, pinyin: 'xian'},
        {label: '成都', key: 6, pinyin: 'chengdu'}],
      filterMethod(query, item) {
        return item.pinyin.indexOf(query) > -1;
      },

      mileMarkData: [{milemark_id: '', milemark_name: '',
        line_id: '', line_name: '',
        start_id: '', start_name: '',
        stop_id: '', stop_name: ''},],
      total: 0,
      pagesize: 15,
      currentPage: 1,
      st: 2,
      words: {
        word: ''
      },
      direction: 'rtl',
      options: [{line_id:'',line_name:'',line_index:'',stations:''},],
      option_station1:[],
      option_station2:[],
      val:'',
      val_edit:'',
      newmilemarkinfo: {
        milemark_id: '', milemark_name: '',line_id:'',start_point_id:'',end_point_id:'',
      },
      line: {subcom_name: '', super_company_name: ''},
      editmilemarkinfo: {
        milemark_id: '', milemark_name: '',line_id:'',start_point_id:'',end_point_id:'',
      },
      dialogVisible: false,
      dialogVisible2: false
    }
  },
  mounted() {
    this.$axios.get(`http://127.0.0.1:5000/milemark/init`).then((res) => {
      console.log(res);
      this.mileMarkData = res.data;
      this.total = this.mileMarkData.length;
      console.log(this.mileMarkData);
    });
    this.$axios.get(`http://127.0.0.1:5000/milemark/options`).then((res) => {
      console.log(res);
      this.options = res.data;
    });
  },
  methods: {
    current_change: function(currentPage){
      this.currentPage = currentPage;
    }, async vague() {
      this.$axios.post(`http://127.0.0.1:5000/milemark/select`, this.words).then((res) => {
        console.log(res);
        if(res.data==0){
          this.$message('没有符合查询条件的结果');
        }
        else {
          this.mileMarkData = res.data;
          this.total = this.mileMarkData.length;
        }
      });
    },
    handleDelete(milemark_id) {
      this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.onDelete(milemark_id);
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    async onDelete(milemark_id) {
      console.log(milemark_id);
      this.$axios.post(`http://127.0.0.1:5000/milemark/delete`, milemark_id).then((res) => {
        console.log(res);
        this.st = res.data;
        if (this.st===1){
          this.$message('删除成功');
          window.location.reload();}
        else{
          this.$message('删除失败');
        }
        this.st = 2;
      });
    },
    async newmilemark() {
      if (this.newmilemarkinfo.milemark_id=== '')
        this.$message('请输入里程标编号');
      else if (this.newmilemarkinfo.milemark_name==='')
        this.$message('请输入里程标名称');
      else if (this.newmilemarkinfo.line_id==='')
        this.$message('请选择所属线路');
      else if (this.newmilemarkinfo.start_point_id==='')
        this.$message('请选择起始站点');
      else if (this.newmilemarkinfo.end_point_id==='')
        this.$message('请选择终止站点');
      else if (this.newmilemarkinfo.end_point_id===this.newmilemarkinfo.start_point_id)
        this.$message('起始和终止站点不能相同哦');
      else
        this.$axios.post(`http://127.0.0.1:5000/milemark/newmilemark`, this.newmilemarkinfo).then((res) => {
          console.log(res);
          this.st = res.data;
          if (this.st===1) {
            this.$message('新增成功');
            this.dialogVisible = false
            window.location.reload();
          }
          else {
            this.$message('新增失败，线路已存在！');
          }
          this.st=2;
        });
    },
    retain(mark){
      this.dialogVisible2 = true;
      this.editmilemarkinfo.milemark_id=mark.milemark_id;
      this.editmilemarkinfo.milemark_name=mark.milemark_name;
      this.editmilemarkinfo.line_id = mark.line_id;
      this.editmilemarkinfo.start_point_id = mark.start_id;
      this.editmilemarkinfo.end_point_id = mark.stop_id;

      for (let line of this.options)
        if (line.line_id === mark.line_id)
          this.val_edit = line.line_index;
    },
    handleEdit() {
      if (this.editmilemarkinfo.milemark_id=== '')
        this.$message('请输入里程标编号');
      else if (this.editmilemarkinfo.milemark_name==='')
        this.$message('请输入里程标名称');
      else if (this.editmilemarkinfo.line_id==='')
        this.$message('请选择所属线路');
      else if (this.editmilemarkinfo.start_point_id==='')
        this.$message('请选择起始站点');
      else if (this.editmilemarkinfo.end_point_id==='')
        this.$message('请选择终止站点');
      else if (this.editmilemarkinfo.end_point_id===this.editmilemarkinfo.start_point_id)
        this.$message('起始和终止站点不能相同哦');
      else
        this.$axios.post(`http://127.0.0.1:5000/milemark/editmilemark`, this.editmilemarkinfo).then((res) => {
          console.log(res);
          this.st = res.data;
          if (this.st===1) {
            this.$message('修改成功');
            this.dialogVisible2=false;
            window.location.reload();
          }
          else{
            this.$message('修改失败！');
          }
          this.st.statu=2;
        });
    }
  },
  watch:{
    val (val,oldval){
      console.log("改变线路选择：")
      console.log(val);
      this.newmilemarkinfo.line_id = this.options[val].line_id;

      this.newmilemarkinfo.start_point_id = '';
      this.newmilemarkinfo.end_point_id = '';

      this.option_station1 = this.options[val].stations;
      this.option_station2 = this.options[val].stations;
    },
    val_edit (val_edit,old_val_edit){
      console.log("改变编辑线路选择：")
      console.log(val_edit);
      this.editmilemarkinfo.line_id = this.options[val_edit].line_id;

      this.editmilemarkinfo.start_point_id = '';
      this.editmilemarkinfo.end_point_id = '';

      this.option_station1 = this.options[val_edit].stations;
      this.option_station2 = this.options[val_edit].stations;
    }
  }
}
</script>

<style scoped>
.menu{
  width: 100%;
  float: left;
  height: 700px;
}
.text {
  font-size: 14px;
}
.item {
  margin-bottom: 18px;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both
}

.box-card {
  width: 100%;
}

.verticalBar {
  float: right;
  width: 2px;
  height: 20px;
  background: dodgerblue;
  display: inline-block;
  /*margin-top: 16px;*/
  /*vertical-align: top;*/
  margin-right: 20px;
  /*margin-left: 0;*/
}

</style>
